<!-- 集中式布局 -->
<template>
  <div>
    <el-container>
      <el-aside width="200px" style="text-align: center;position: fixed;z-index: 99;">
        <el-radio-group v-model="tabPosition" style="margin-bottom: 20px;" @change="getCollect()">
          <el-radio-button label="收藏" >收藏</el-radio-button>
          <el-radio-button label="所有">所有</el-radio-button>
        </el-radio-group>

        

        <template v-if="tabPosition=='收藏'">
            <el-menu :default-active="defaultActive">
            <el-menu-item v-for="(item,index) in userCollect" :index="item.name" @click="gotoRouteHandle(item,index)" :key="index"
            class="menu"
            >
              <!-- <icon-svg :name="menu.icon || ''" class="site-sidebar__menu-icon"></icon-svg> -->
              <span>{{ item.name?item.name:item.menuName }}</span>
              <i class="el-icon-star-on mutilIcon" v-if="typeof  key[item.menuId] !== 'undefined'"  @click.stop="cancelMenu(item)"  :key="item.menuId"></i> 

              <i class="el-icon-star-off mutilIcon" v-else @click.stop="collectMenu(item)"  :key="item.menuId"></i> 
            </el-menu-item>
            <template v-if="userCollect.length==0">
              <span>  暂无收藏</span>
            </template>
        </el-menu>

        </template>


        <template v-if="tabPosition=='所有'">
          <el-autocomplete
          class="inline-input"
          v-model="state"
          :fetch-suggestions="querySearch"
          placeholder="请输入内容"
          @select="handleSelect"
          style="margin-bottom: 20px;"
          @keyup.enter="search()"
        >
        <el-button slot="append" icon="el-icon-search" @click="search()"></el-button>
        </el-autocomplete>


          <el-menu :default-active="defaultActive" v-if="!searchFlag">
              <!-- <el-menu-item v-for="(item,index) in menuList" :index="index + ''" @click="gotoRouteHandle(item,index)">
                <icon-svg :name="menu.icon || ''" class="site-sidebar__menu-icon"></icon-svg>
                <span>{{ item.name }}</span>
              </el-menu-item> -->
              <el-submenu v-for="(item,index) in menuList" :index="item.name" :key="item.name" @click="gotoRouteHandle(item,index)">
                  <template slot="title"><div style="text-align:left"><icon-svg :name="item.icon || ''" class="site-sidebar__menu-icon"></icon-svg> {{item.name}}</div></template>
                  <el-menu-item v-for="(item2,index2) in item.list" :index="item2.name" :key="item2.name" @click="gotoRouteHandle(item2,index2)">
                    {{item2.name}} 
                    
                      <i class="el-icon-star-on mutilIcon" v-if="typeof  key[item2.menuId] !== 'undefined'"  @click.stop="cancelMenu(item2)"  :key="item3.menuId"></i> 

                      <i class="el-icon-star-off mutilIcon" v-else @click.stop="collectMenu(item2)"  :key="item3.menuId"></i> 

                  </el-menu-item>
              </el-submenu>
          </el-menu>

          <el-menu v-if="searchFlag" :default-openeds="opends">
              <!-- <el-menu-item v-for="(item,index) in menuList" :index="index + ''" @click="gotoRouteHandle(item,index)">
                <icon-svg :name="menu.icon || ''" class="site-sidebar__menu-icon"></icon-svg>
                <span>{{ item.name }}</span>
              </el-menu-item> -->
              <el-submenu :index="'666'">
                  <template slot="title"><icon-svg name="" class="site-sidebar__menu-icon"></icon-svg> 搜索结果</template>
                  <el-menu-item v-for="(item2,index2) in searchResult" :index="index2+''" :key="item2.name" @click="gotoRouteHandle(item2,index2)">
                    {{item2.name}} 
                    
                      <i class="el-icon-star-on mutilIcon" v-if="typeof  key[item2.menuId] !== 'undefined'"  @click.stop="cancelMenu(item2)"  :key="item2.menuId"></i> 

                      <i class="el-icon-star-off mutilIcon" v-else @click.stop="collectMenu(item2)"  :key="item2.menuId"></i> 

                  </el-menu-item>
              </el-submenu>
          </el-menu>
          
        </template>
      </el-aside>

      <el-container style="position: relative;padding-left: 200px;display: flex;flex-direction: column;">
        <el-main style="padding-top: 0;">
          <!-- <iframe
            v-if="item3.meta.iframeUrl"
            :src="item3.meta.iframeUrl"
            width="100%" height="100%" frameborder="0" scrolling="yes">
          </iframe> -->
          <keep-alive>
            <router-view/>
          </keep-alive>
        </el-main>
      </el-container>

    </el-container>

  </div>
</template>

<script>
import moment from 'moment'
export default {
  data() {
    return {
      id:undefined,
      path:undefined,
      menuList:[],
      activeName:'',
      activeList:[],
      name:'',
      childShowType:'',
      defaultActive: '0',
      item3:null,
      tabPosition:"收藏",
      collect:[],
      searchData:[],
      searchResult:[],
      state:'',
      restaurants:[],
      userCollect:[],
      key:[],
      searchFlag:false,
      opends:['666']
      
    };
  },
  activated(){
    
  },
  mounted: function () {
    console.log("是是是")
  },
  created() {

  },
  methods: {
    init(id,childShowType){
      console.log(id,childShowType)
      this.id = id
      this.getCollect();
      this.childShowType = childShowType
      this.$nextTick(() => {
          //查询下级菜单
          const menuList = JSON.parse(sessionStorage.getItem('menuList') || '[]')
          this.menuList = menuList.filter(item => item.type == 0 && item.parenttopId == id)
          
          console.log(this.menuList)

          //默认选中第一个
          var menu = this.menuList[0]
          //默认激活第一个二级菜单

          let route = JSON.parse(sessionStorage.getItem('dynamicMenuRoutes') || '[]').filter(item => item.meta.menuId === id)
          

          console.log('route',route)
          let menuRoute = route[0].children[0]
          console.log("默认第一个",menuRoute)
          this.defaultActive=this.menuList[0].list[0].name
          console.log(menuRoute)

          this.item3 = menuRoute
          
          if(!this.item3.meta.iframeUrl){
            console.log("跳转")
            this.$router.replace(
              {
                name:`${this.item3.name}`,
                query: {
                  id: this.id,
                  childShowType:this.childShowType,
                }
              }
            )
          }
          
          this.menuList.forEach(item=>{
            item.list.forEach(item2=>{
              this.collect.push(item2)
              this.searchData.push({'value':item2.name})
          })
          
          this.restaurants = this.searchData;
          
      })

      
      
      })

      
    },
    gotoRouteHandle (menu,index) {
      //激活第一个
      let route = JSON.parse(sessionStorage.getItem('dynamicMenuRoutes') || '[]').filter(item => item.meta.menuId === this.id)
      // let menuRoute = route[0].children[0]
      console.log(route[0].children)
      let menuRoute = route[0].children.filter(item => item.meta.menuId === menu.menuId)
      console.log("默认第一个",menuRoute)
      console.log(menuRoute)

      this.item3 = menuRoute[0]
      if(!this.item3.meta.iframeUrl){
        this.$router.replace(
          {
            name:`${this.item3.name}`,
            query: {
              id: this.id,
              childShowType:this.childShowType,
            }
          }
        )
      }
    },
    handleClick(tab, event) {
      console.log(tab, event);
      var menu = this.activeList[tab.index]
      let route = JSON.parse(sessionStorage.getItem('dynamicMenuRoutes') || '[]').filter(item => item.meta.menuId === menu.menuId)
      this.item3 = route[0]
      console.log(route)
      if(!this.item3.meta.iframeUrl){
        var $route = this.$route
        this.$router.replace(
          {
            name:`item${menu.menuId}`,
            query: {
              id: this.id,
              childShowType:this.childShowType,
            }
          }
        )
      }
    },
    querySearch(queryString, cb) {
        var restaurants = this.restaurants;
        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
        // 调用 callback 返回建议列表的数据
        cb(results);
      },
      createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
      handleSelect(item1) {
        var temp=[]
        this.collect.forEach(item=>{
         if(item.name.indexOf(item1.value)!==-1){
           temp.push(item)
         }
        })
        this.searchResult=temp
        this.searchFlag=true
      },
      search(key){
        console.log(this.state)
         var temp=[]
        this.collect.forEach(item=>{
         if(item.name.indexOf(this.state)!==-1){
           temp.push(item)
         }
        })
        this.searchResult=temp
        this.searchFlag=true
      },
      getCollect(){
        
            this.$http({
            url: this.$http.adornUrl("/hotel/thotelcollectmenu/listByUserAndMenuId"),
            method: "get",
            params: this.$http.adornParams(
              {
                parentMenuId:this.id
              }
            )
          }).then(({ data }) => {
            console.log(data)
            if (data && data.code === 0) {
                
                this.userCollect=data.list
                this.key={}
                this.userCollect.forEach(item=>{
                  this.key[item.menuId]=item.menuId
                })

                
                

                
            }
          });
        
        
      },
      collectMenu(menu){
        this.$http({
            url: this.$http.adornUrl("/hotel/thotelcollectmenu/save"),
            method: 'post',
            data: this.$http.adornData(
              {
                parentMenuId:this.id,
                menuId:menu.menuId,
                menuName:menu.name,
                createTime:moment().format('YYYY-MM-DD HH:mm:ss')
              }
            )
          }).then(({ data }) => {
            console.log(data)
            if (data && data.code === 0) {
              this.$message.success("收藏成功")
              
                this.getCollect();
                this.$forceUpdate();
              
              
            }
          });
      },
      cancelMenu(menu){
        this.$http({
            url: this.$http.adornUrl("/hotel/thotelcollectmenu/cancelCollectMenu"),
            method: 'get',
            params: this.$http.adornParams(
              {
                parentMenuId:this.id,
                menuId:menu.menuId
              }
            )
          }).then(({ data }) => {
            console.log(data)
            if (data && data.code === 0) {
              this.$message.success("取消收藏成功")
              this.getCollect()
              this.$forceUpdate();
            }
          });
      }

  }
};
</script>

<style scoped lang="scss">
  .mutilIcon{
    position: absolute;
    top: 50%;
    margin-top: -10px;
    left: 80%;
  }
  .el-menu-item{
    padding-left: 10px!important;
    text-align: left;
    
  }
  .el-submenu /deep/ .el-submenu__title{
    padding-left: 5px!important;
    text-align: left!important;
    border: 1px solid rgb(230, 227, 227);
  }
</style>